<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div>
    <h1>template自定义组件模版及子组件引用父组件数据</h1>
</div>
<div id="app">
    <custom-tmpl v-bind:p-name="name" v-bind:p-user-post="post"></custom-tmpl>
</div>

<template id="tmpl">
    <table>
        <tr>
            <th colspan="2">
                子组件数据
            </th>
        </tr>
        <tr>
            <td>姓名</td>
            <td>{{ pName }}</td>
        </tr>
        <tr>
            <td>职称</td>
            <td>{{ pUserPost }}</td>
        </tr>
    </table>
</template>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '张三丰',
            post: '太极创始人'
        },
        components: {
            'custom-tmpl': {
                template: '#tmpl',
                props: ['pName', 'pUserPost']
            }
        }
    });
</script>
</body>
</html>